<template>
  <div class="publish-demand-container">
    <div class="page-header">
      <h1>发布需求</h1>
    </div>

    <!-- 表单状态栏 -->
    <el-steps :active="activeStep" finish-status="success" class="steps-bar">
      <el-step title="填写需求信息" />
      <el-step title="确认发布" />
      <el-step title="发布成功" />
    </el-steps>

    <div class="form-container">
      <!-- 第一步：填写需求信息 -->
      <div v-if="activeStep === 0">
        <el-form
          ref="demandFormRef"
          :model="demandForm"
          :rules="rules"
          label-width="100px"
          class="demand-form"
        >
          <el-form-item label="需求标题" prop="title">
            <el-input
              v-model="demandForm.title"
              placeholder="请输入需求标题"
              maxlength="100"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="需求描述" prop="description">
            <el-input
              v-model="demandForm.description"
              type="textarea"
              placeholder="请详细描述您的需求"
              rows="6"
              maxlength="2000"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="预算金额" prop="budget">
            <el-input-number
              v-model="demandForm.budget"
              :min="0"
              :precision="2"
              :step="100"
              placeholder="请输入预算金额"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="截止日期" prop="deadline">
            <el-date-picker
              v-model="demandForm.deadline"
              type="datetime"
              placeholder="请选择截止日期"
              :disabled-date="disabledDate"
              style="width: 100%"
            />
          </el-form-item>

          <el-form-item label="需求状态">
            <el-radio-group v-model="demandForm.status">
              <el-radio :label="0">保存为草稿</el-radio>
              <el-radio :label="3">立即发布</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleNext">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 第二步：确认发布 -->
      <div v-if="activeStep === 1">
        <div class="confirm-info">
          <h3>请确认需求信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="需求标题">{{ demandForm.title }}</el-descriptions-item>
            <el-descriptions-item label="需求描述">{{ demandForm.description }}</el-descriptions-item>
            <el-descriptions-item label="预算金额">{{ demandForm.budget }} 元</el-descriptions-item>
            <el-descriptions-item label="截止日期">{{ formatDateTime(demandForm.deadline) }}</el-descriptions-item>
            <el-descriptions-item label="发布方式">
              {{ demandForm.status === 0 ? '保存为草稿' : '立即发布' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="action-buttons">
          <el-button @click="activeStep = 0">上一步</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">确认发布</el-button>
        </div>
      </div>

      <!-- 第三步：发布成功 -->
      <div v-if="activeStep === 2" class="success-page">
        <div class="success-icon">
          <el-icon :size="60" color="#67c23a"><CircleCheck /></el-icon>
        </div>
        <h2 v-if="demandForm.status === 0">需求已保存为草稿</h2>
        <h2 v-else>需求发布成功</h2>
        <p v-if="demandForm.status === 0">您可以在"我的需求"中继续编辑和发布</p>
        <p v-else>您的需求将等待平台审核，审核通过后将正式发布</p>
        
        <div class="success-actions">
          <el-button @click="handleBackToList">查看我的需求</el-button>
          <el-button type="primary" @click="handlePublishAnother">发布新需求</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CircleCheck } from '@element-plus/icons-vue';
import { usePublishDemand } from '../hooks/usePublishDemand';

// 使用发布需求的hook
const {
  // 引用和状态
  demandFormRef,
  activeStep,
  submitting,
  
  // 数据
  demandForm,
  rules,
  
  // 方法
  disabledDate,
  formatDateTime,
  handleNext,
  handleSubmit,
  handleCancel,
  handleBackToList,
  handlePublishAnother
} = usePublishDemand();
</script>

<style scoped>
.publish-demand-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: 30px;
}

.page-header h1 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.steps-bar {
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-container {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.demand-form {
  max-width: 800px;
}

.confirm-info {
  max-width: 800px;
  margin-bottom: 40px;
}

.confirm-info h3 {
  margin-bottom: 20px;
  color: #303133;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.success-page {
  text-align: center;
  padding: 60px 20px;
}

.success-icon {
  margin-bottom: 30px;
}

.success-page h2 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 24px;
}

.success-page p {
  margin-bottom: 40px;
  color: #606266;
  font-size: 16px;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

@media (max-width: 768px) {
  .form-container {
    padding: 20px;
  }
  
  .steps-bar {
    padding: 15px;
  }
}
</style>